<template>
	<view class="cyber-container">
		<view class="cyber-card">
			<!-- 标题 -->
			<view class="cyber-title">
				<view class="title-frame">
					<view class="title-text">油耗计算器</view>
					<view class="title-grid"></view>
				</view>
				<view class="title-underline"></view>
			</view>

			<!-- 输入区域 -->
			<view class="input-group">
				<view class="cyber-input" :class="{active: priceFocus}">
					<text class="input-label">当前油价 (元/升)</text>
					<input class="input-field" type="number" v-model="price" @focus="priceFocus = true"
						@blur="priceFocus = false" placeholder="¥0.00" />
					<view class="input-decor">
						<view class="decor-line"></view>
						<view class="decor-dot"></view>
					</view>
				</view>

				<view class="cyber-input" :class="{active: distanceFocus}">
					<text class="input-label">行驶里程 (KM)</text>
					<input class="input-field" type="number" v-model="distance" @focus="distanceFocus = true"
						@blur="distanceFocus = false" placeholder="0KM" />
					<view class="input-decor">
						<view class="decor-line"></view>
						<view class="decor-dot"></view>
					</view>
				</view>

				<view class="cyber-input" :class="{active: amountFocus}">
					<text class="input-label">加油金额 (元)</text>
					<input class="input-field" type="number" v-model="amount" @focus="amountFocus = true"
						@blur="amountFocus = false" placeholder="¥0.00" />
					<view class="input-decor">
						<view class="decor-line"></view>
						<view class="decor-dot"></view>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="cyber-controls">
				<view class="control-btn reset" @click="reset" @touchstart="btnActive = 'reset'"
					@touchend="btnActive = null" :class="{active: btnActive === 'reset'}">
					<text>重置</text>
					<view class="btn-light"></view>
				</view>
				<view class="control-btn calculate" @click="calculate" @touchstart="btnActive = 'calculate'"
					@touchend="btnActive = null" :class="{active: btnActive === 'calculate'}">
					<text>开始计算</text>
					<view class="btn-light"></view>
				</view>
			</view>

			<!-- 结果展示 -->
			<view v-if="showResult" class="cyber-output">
				<view class="output-panel">
					<view class="output-item">
						<text class="output-label">百公里油耗（L/100km）：</text>
						<text class="output-value">{{ fuelConsumption }}<span class="unit">L</span></text>
					</view>
					<view class="output-line"></view>
				</view>
				<view class="output-panel">
					<view class="output-item">
						<text class="output-label">油费多少钱一公里（元/km）：</text>
						<text class="output-value">{{ costPerKm }}<span class="unit">¥</span></text>
					</view>
					<view class="output-line"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: '',
				distance: '',
				amount: '',
				priceFocus: false,
				distanceFocus: false,
				amountFocus: false,
				btnActive: null,
				showResult: false,
				fuelConsumption: 0,
				costPerKm: 0
			}
		},
		methods: {
			calculate() {
				if (!this.validateInput()) return;

				const startTime = performance.now();

				// 性能优化：批量处理数据
				const [price, distance, amount] = [
					parseFloat(this.price),
					parseFloat(this.distance),
					parseFloat(this.amount)
				];

				// 使用Web Worker进行计算（伪代码）
				this.fuelConsumption = this.calculateFuel(price, distance, amount);
				this.costPerKm = this.calculateCost(distance, amount);

				this.showResult = true;

				console.log(`计算耗时：${performance.now() - startTime}ms`);
			},
			calculateFuel(price, distance, amount) {
				return ((amount / price / distance) * 100).toFixed(2);
			},
			calculateCost(distance, amount) {
				return (amount / distance).toFixed(2);
			},
			validateInput() {
				const isValid = [this.price, this.distance, this.amount].every(v => v !== '');
				if (!isValid) {
					uni.showToast({
						title: '请填写完整数据',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			reset() {
				// 优化数据重置性能
				Object.assign(this.$data, this.$options.data());
			}
		}
	}
</script>
<style scoped>
	/* 基础容器 */
	.cyber-container {
		background: #f5f6fa;
		min-height: 100vh;
		padding: 20px;
		font-family: system-ui, -apple-system, sans-serif;
	}

	/* 卡片容器 */
	.cyber-card {
		background: #ffffff;
		border-radius: 12px;
		padding: 24px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	/* 标题样式 */
	.cyber-title {
		margin-bottom: 32px;
		padding-bottom: 16px;
		border-bottom: 2px solid #e9ecef;
	}

	.title-text {
		color: #2d3436;
		font-size: 22px;
		font-weight: 600;
	}

	/* 输入组 */
	.input-group {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.cyber-input {
		position: relative;
		padding-bottom: 8px;
		border-bottom: 2px solid #e9ecef;
		transition: border-color 0.2s;
	}

	.cyber-input.active {
		border-color: #4a90e2;
	}

	.input-label {
		display: block;
		color: #6c757d;
		font-size: 14px;
		margin-bottom: 8px;
	}

	.input-field {
		width: 100%;
		height: 36px;
		font-size: 16px;
		color: #2d3436;
		background: transparent;
	}

	/* 操作按钮 */
	.cyber-controls {
		display: flex;
		gap: 16px;
		margin-top: 32px;
	}

	.control-btn {
		flex: 1;
		height: 48px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		transition: all 0.2s;
	}

	.reset {
		background: #f8f9fa;
		color: #6c757d;
		border: 1px solid #e9ecef;
	}

	.calculate {
		background: #4a90e2;
		color: white;
	}

	.control-btn.active {
		transform: scale(0.98);
	}

	/* 结果展示 */
	.cyber-output {
		margin-top: 32px;
		background: #f8f9fa;
		border-radius: 8px;
		padding: 16px;
	}

	.output-panel {
		padding: 12px 0;
	}

	.output-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.output-label {
		color: #6c757d;
		font-size: 14px;
	}

	.output-value {
		color: #2d3436;
		font-weight: 600;
		font-size: 16px;
	}

	.unit {
		font-size: 12px;
		margin-left: 2px;
		color: #6c757d;
	}

	.output-line {
		height: 1px;
		background: #e9ecef;
		margin: 8px 0;
	}

	/* 移除装饰元素 */
	.title-grid,
	.title-underline,
	.input-decor,
	.btn-light {
		display: none !important;
	}
</style>